<script setup lang="ts">
import { list } from '@/api/llm/api'
import useApply from './useApply'

const { isLoading, validationRules, attachments, formData, formRef, onSubmit } = useApply()
const modelList = ref([])

onMounted(async () => {
  const { data } = await list()
  console.log({ data })

  modelList.value = data
})
</script>

<template>
  <div class="space-y-2">
    <card>
      <template #title>
        <span>申请单填写</span>
        <!-- 表单内容 -->
      </template>
      <el-form
        ref="formRef"
        v-loading="isLoading"
        class="w-[520px]"
        label-width="200px"
        element-loading-text="加载中"
        :model="formData"
        :rules="validationRules"
      >
        <el-form-item label="接口名称" prop="apiName">
          <el-input v-model="formData.apiName" placeholder="请输入接口名称" />
        </el-form-item>
        <el-form-item label="申请模型" prop="modelId">
          <el-select v-model="formData.modelId" placeholder="请选择">
            <el-option
              v-for="item in modelList"
              :key="item.modelId"
              :label="item.modelName"
              :value="item.modelId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="申请单位" prop="applyDept">
          <el-input v-model="formData.applyDept" placeholder="请输入申请单位" />
        </el-form-item>
        <el-form-item label="申请人" prop="applyPerson">
          <el-input v-model="formData.applyPerson" placeholder="请输入申请人" />
        </el-form-item>
        <el-form-item label="联系电话" prop="applyPhone">
          <el-input v-model="formData.applyPhone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="联系地址" prop="applyAddr">
          <el-input v-model="formData.applyAddr" placeholder="请输入联系地址" />
        </el-form-item>
        <el-form-item label="联系邮箱" prop="applyEmail">
          <el-input v-model="formData.applyEmail" placeholder="请输入联系邮箱" />
        </el-form-item>
        <el-form-item label="使用场景" prop="applyUseScene">
          <el-input
            v-model="formData.applyUseScene"
            show-word-limit
            type="textarea"
            placeholder="请输入使用场景"
            resize="none"
            :rows="5"
            :maxlength="300"
          />
        </el-form-item>
        <el-form-item label="使用时间" prop="period">
          <el-date-picker
            v-model="formData.period"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <!-- <el-form-item label="文件上传" prop="isFinished">
          <UploadFile v-model:fileBos="attachments" :limit="20" :max="100" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交申请</el-button>
          <!-- <el-button>返回</el-button> -->
        </el-form-item>
      </el-form>
    </card>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
